import React, { Component } from 'react';
import {Link} from 'react-router';
import '../../Stylesheets/wx/common.css';
import '../../Stylesheets/wx/homePage.css';



export default class Footer extends Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            tabIndex:this.props.index
        };
    }


    async changeStatus(index){
        await this.setState({tabIndex:index})
    }
    render() {
        const {tabIndex} = this.state
        const myAgent = sessionStorage.getItem('myAgent');
        let footerList = '';
        if(myAgent>0){
            footerList = [
                {title:'首页',link:'/index',imgUrl:require("../../Images/Index/index.png"),replaceImg:require("../../Images/Index/indexActive.png")},
                {title:'商城',link:'/malls',imgUrl:require("../../Images/Index/shop.png"),replaceImg:require("../../Images/Index/shopActive.png")},
                {title:'购物车',link:'/shopCarts',imgUrl:require("../../Images/Index/shoppingCart.png"),replaceImg:require("../../Images/Index/shoppingCartActive.png")},
                {title:'我的',link:'/PersonalCenter',imgUrl:require("../../Images/Index/personal.png"),replaceImg:require("../../Images/Index/personalActive.png")}

            ]
        }else{
            footerList = [
                {title:'首页',link:'/index',imgUrl:require("../../Images/Index/index.png"),replaceImg:require("../../Images/Index/indexActive.png")},
                {title:'商城',link:'/malls',imgUrl:require("../../Images/Index/shop.png"),replaceImg:require("../../Images/Index/shopActive.png")},
                {title:'购物车',link:'/shopCarts',imgUrl:require("../../Images/Index/shoppingCart.png"),replaceImg:require("../../Images/Index/shoppingCartActive.png")},
                {title:'我的',link:'/userCenter',imgUrl:require("../../Images/Index/personal.png"),replaceImg:require("../../Images/Index/personalActive.png")}

            ]
        }
        return (
            <div className=" df border_top pf bottom0 width100 flex" style={{zIndex:1000}}>
                {
                    footerList.map((el,index)=>{
                        return(
                            <div
                                className="width_100 flex-1 flex flex-pack-center bkg_footer "
                                onClick = {()=>this.changeStatus(index)}>
                                <Link
                                    to={el.link}
                                    className="di df flex-v flex1 flex-align-center color99 width100"
                                >
                                    {
                                        tabIndex == index?
                                            <div style={{height:25}} className="tc">
                                                <span className={tabIndex == index?'di replacrImg':'di footerNav'} style={{lineHeight:0}}>
                                                    <img src={el.replaceImg} />
                                                </span>
                                            </div>
                                            :
                                            <div style={{height:25}} className="tc">
                                                <span className={tabIndex == index?'di replacrImg':'di footerNav'} style={{lineHeight:0}}>
                                                    <img src={el.imgUrl} />
                                                </span>
                                            </div>
                                    }

                                    <div style={{height:22,lineHeight:'22px'}} className={tabIndex == index?'colorlv f12 tc':'color9 f12 tc'}>{el.title}</div>
                                </Link>
                            </div>
                        )
                    })
                }
            </div>


        );
    }
}